<!DOCTYPE html>
<html lang="en" ng-app="route">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="me-pageloading.min.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html, body{
            background: #4fc3f7;
            width: 100%;
            height: 100%;
            text-align: center;
        }
        h1{
            font-size: 30px;
            color: #fff;
            text-align: center;
            padding-top: 50px;
        }
        div.demo{
            width: 100%;
            position: fixed;
            left: 50%;
            top: 30%;
            color: #fff;
            font-size: 24px;
            line-height: 2;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
        }
        a.demo{
            text-align: center;
            color: #fff;
            font-weight: bold;
            text-decoration: none;
            font-size: 24px;
            border-bottom: 2px solid #fff;
            margin: 5px;
        }

    </style>
</head>
<body>
    <h1>me-pageloading</h1>
    <div ui-view></div>

    <div class="demo">
        在
        <br />
        <a class="demo" href="#/page1">页面1</a> 与 <a class="demo" href="#/page2">页面2</a>
        <br />之间随机切换

        <br />
        <br />

        预览特定效果
        <br />
        <select name="opt" id="opt" ng-model="effect" ng-change="show()">
            <option value="random" selected>Random</option>
            <option value="Lazy Stretch">Lazy Stretch</option>
            <option value="Circle">Circle</option>
            <option value="Spill">Spill</option>
            <option value="Frame it">Frame it</option>
            <option value="Tunnel vision">Tunnel vision</option>
            <option value="Windscreen wiper">Windscreen wiper</option>
            <option value="Jammed blind">Jammed blind</option>
            <option value="Parallelogram">Parallelogram</option>
            <option value="Tilted">Tilted</option>
            <option value="Lateral Swipe">Lateral Swipe</option>
            <option value="Wave">Wave</option>
            <option value="Origami">Origami</option>
            <option value="Curtain">Curtain</option>
        </select>
    </div>

    <a href="https://github.com/jeremial/me-pageloading"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>

    <script src="http://cdn.staticfile.org/snap.svg/0.2.0/snap.svg-min.js"></script>
    <script src="http://cdn.staticfile.org/angular.js/1.2.18/angular.min.js"></script>
    <script src="http://cdn.staticfile.org/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
    <script src="me-pageloading.min.js"></script>
    <script>
        angular.module('route', [
            'ui.router',
            'me-pageloading'
        ])
        .config(['$stateProvider', '$urlRouterProvider', 'mePageLoadingProvider', function($stateProvider, $urlRouterProvider, mePageLoadingProvider){

            $stateProvider
            .state('page1', {
                url: '/page1',
                template: '<div></div>',
                controller: 'page1',
                resolve: {
                    data: ['$q', function($q){
                        var defer = $q.defer();
                        setTimeout(function(){
                            defer.resolve('page1');
                        }, 1500);
                        return defer.promise;
                    }]
                }
            })
            .state('page2', {
                url: '/page2',
                template: '<div></div>',
                controller: 'page2',
                resolve: {
                    data: ['$q', function($q){
                        var defer = $q.defer();
                        setTimeout(function(){
                            defer.resolve('page2');
                        }, 1500);
                        return defer.promise;
                    }]
                }
            });

            $urlRouterProvider.otherwise('/page1');
        }])
        .controller('page1', ['data', function(data){

        }])
        .controller('page2', ['data', function(data){

        }])
        .run(['$rootScope', '$window', 'mePageLoading', function($rootScope, $window, mePageLoading){
            $rootScope.effect = 'random';
            $rootScope.show = function(){
                mePageLoading.show($rootScope.effect);
                setTimeout(function(){
                    mePageLoading.hide();
                }, 1500);
            };
        }]);
    </script>
</body>
</html>